<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="lijun; 67086071; zwlijun@qq.com" />
<title>RIA Client API - BY 小网</title>
<link href="css/api.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <ins>此文档描述SlideBar对象</ins>
  <div class="nav">
    <a href="#SlidePanel">SlidePanel()</a>
    <a href="#init">init()</a>
    <a href="#create">create()</a>
    <a href="#updateData">updateData()</a>
  </div>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">SlidePanel方法<a name="SlidePanel"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>构造方法</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var sp = new SlidePanel();</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>构造方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
var sp = new SlidePanel();
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">init方法<a name="init"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>初始化SlidePanel</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>
<pre>
sp.init(config);
  config.id = 0;                //panelId
  config.width = 550;           //内容宽度
  config.height = 400;          //内容高度
  config.wayWidth = 2;          //滑槽宽度
  config.wayHeight = 400;       //滑槽高度
  config.barWidth = 6;          //滑块宽度
  config.barHeight = 12;        //滑块高度
  config.scrollSize = 20;       //滚动偏移值
  config.layout = this.RIGHT;   //布局方式
  config.namespace = "sp";      //对象引用串
  config.target = document.body;//目标对象
  config.cssTexts = [];         //样式
</pre>
        </td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>初始化SlidePanel</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
sp.init({
    target : "sp_test",
    width : 300,
    height : 120,
    wayWidth : 0,
    wayHeight : 120,
    barWidth : 8,
    barHeight : 20,
    scrollSize : 20,
    layout : sp.RIGHT,
    cssTexts : [
        '.slide-panel{background-color:#DEDEDE;}',
        '.slide-way{border-left:1px solid #686868;
              border-right:1px solid #fff;}',
        '.slide-bar{background-color:yellow;}',
        '.slide-bar-hover{background-color:red;}',
        '.slide-bar-dis{background-color:gray;}'
    ]
});
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">create方法<a name="create"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>建立SlidePanel</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>sp.create(htmlItems);</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>建立SlidePanel</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
sp.create([
  '&lt;p class="p"&gt;今日焦点：给群众贴标签才是别有用心&lt;/p&gt;',
  '&lt;p class="p"&gt;今日专栏：连城管局长们都参加非法组织&lt;/p&gt;',
  '&lt;p class="p"&gt;今日思想：98.6%的中国富豪没问题&lt;/p&gt;',
  '&lt;p class="p"&gt;今日社会：如果章子怡裸奔 我也裸奔&lt;/p&gt;',
  '&lt;p class="p"&gt;民生日记：宁嫁农民工，不嫁男白领&lt;/p&gt;',
  '&lt;p class="p"&gt;燕山讲堂：雷颐 制度滞后与清王朝覆亡&lt;/p&gt;',
  '&lt;p class="p"&gt;青年发帖举报遭起诉续：获1.68万国家赔偿&lt;/p&gt;',
  '&lt;p class="p"&gt;网瘾少年被殴死调查：黑训练营两年盈利千万&lt;/p&gt;',
  '&lt;p class="p"&gt;9岁男孩被逼捡垃圾赚钱供其父酗酒(图)&lt;/p&gt;',
  '&lt;p class="p"&gt;刘德华在官网承认结婚 向粉丝留言《对不起》&lt;/p&gt;',
  '&lt;p class="p"&gt;日本大选进入最后冲刺 执政党选情堪忧(图)&lt;/p&gt;',
  '&lt;p class="p"&gt;胡润发布中国富豪特别报告：10年间17人入狱(图)&lt;/p&gt;',
  '&lt;p class="p"&gt;浙江规定交通肇事报警非自首 专家称有违刑法&lt;/p&gt;',
  '&lt;p class="p"&gt;俄媒称中俄阿尔泰天然气管道建设被无限期冻结&lt;/p&gt;',
  '&lt;p class="p"&gt;反价格垄断规定征求意见 价格同盟受法律约束&lt;/p&gt;',
  '&lt;p class="p"&gt;发改委要求取消有线电视服务不合理收费&lt;/p&gt;',
  '&lt;p class="p"&gt;人大官员称促进社会公平正义将成立法重点&lt;/p&gt;',
  '&lt;p class="p"&gt;中石油受益于新定价机制 炼油业务扭亏为盈&lt;/p&gt;'
]);
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">updateData方法<a name="updateData"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>更新数据内容</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>sp.updateData(htmlItems);</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>更新数据内容</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
sp.updateData([
  '&lt;p class="p"&gt;今日焦点：给群众贴标签才是别有用心&lt;/p&gt;',
  '&lt;p class="p"&gt;今日专栏：连城管局长们都参加非法组织&lt;/p&gt;',
  '&lt;p class="p"&gt;今日思想：98.6%的中国富豪没问题&lt;/p&gt;',
  '&lt;p class="p"&gt;今日社会：如果章子怡裸奔 我也裸奔&lt;/p&gt;',
  '&lt;p class="p"&gt;民生日记：宁嫁农民工，不嫁男白领&lt;/p&gt;',
  '&lt;p class="p"&gt;燕山讲堂：雷颐 制度滞后与清王朝覆亡&lt;/p&gt;'
]);
</pre>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>